// Captcha：全自动区分人与计算机的图灵测试（验证码）

import React, { Component } from "react";
import axios from "axios";
class Captcha extends Component {
  state = {};
  render() {
    // 灵活的去获取尺寸大小
    let w = this.props.w || 120;
    let h = this.props.h || 40;
    return (
      <>
        <img src={this.state.img} alt="点击刷新验证码" onClick={this.loadCaptcha.bind(this)}
          width={w}
          height={h}
        />
      </>
    );
  }

  componentDidMount() {
    this.loadCaptcha() // 首次请求验证码
  }

  // 刷新验证码
  loadCaptcha() {
    axios.get("https://reactapi.iynn.cn/captcha/api/math").then((res) => {
      this.setState({
        // 验证码的key值
        key: res.data.key,
        // 验证码的图片编码字符串
        img: res.data.img,
      });

      // 假设父传递一个方法来获取key值，拟定方法名为setKey
      this.props.setKey(res.data.key);
    });
  }
}

export default Captcha;
